const { template } = require("lodash");

<template>
  <div>
    <!-- 搜索栏 -->
    <div class="search-box" v-if="table.hasSearch">
      <el-collapse-transition>
        <div v-show="showform" class="transition-box">
          <slot name="searchBox"></slot>
        </div>
      </el-collapse-transition>
      <div class="headerbtn">
        <slot name="headerbtn"></slot>
        <el-button icon="el-icon-search" circle @click="clickShow" v-if="table.headerShowBtn"></el-button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="table-box">
      <el-table
        v-loading="table.loading"
        :show-summary="table.hasShowSummary"
        :summary-method="table.getSummaries"
        ref="ELTable"
        :id="exportId"
        :data="tableData"
        tooltip-effect="dark"
        :border="table.border"
        style="width: 100%"
        header-row-class-name="thClassName"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
        @row-click="rowClick"
      >
        <!-- 选择框 -->
        <el-table-column
          v-if="table.hasSelect"
          type="selection"
          :selectable="checkSelectable"
          width="80"
        >
        </el-table-column>

        <el-table-column
          v-if="table.hasIndex"
          type="index"
          width="80"
          label="序号"
        >
        </el-table-column>

        <!-- 无数据-->
        <template #empty>
          <span class="no-data">
            <img src="../../assets/nodata.png" />
            <span>暂无数据</span>
          </span>
        </template>

        <template v-for="(item, index) in table.tr" :key="index">
          <el-table-column
            v-if="item.show !== false && item.show === 'template'"
            :label="item.label"
            :class-name="item.className ? item.className : ''"
            :key="item.id"
            :show-overflow-tooltip="true"
            :fixed="item.fixed"
            :width="item.width ? item.width : ''"
            :min-width="item.minWidth ? item.minWidth : ''"
          >
            <template #default="scope">
              <slot :name="item.prop" :obj="scope"></slot>
            </template>
          </el-table-column>
          <el-table-column
            v-if="item.show !== false && item.show === 'filter'"
            :label="item.label"
            :class-name="item.className ? item.className : ''"
            :key="item.id"
            :filters="item.filters"
            :filter-method="item.filterFun"
            :filter-multiple="false"
            :fixed="item.fixed"
            :show-overflow-tooltip="true"
            :width="item.width ? item.width : ''"
            :min-width="item.minWidth ? item.minWidth : ''"
          >
            <template #default="scope">
              <slot :name="item.prop" :obj="scope"></slot>
            </template>
          </el-table-column>
          <el-table-column
            v-else-if="item.show !== false && item.show !== 'template'"
            :label="item.label"
            :prop="item.prop"
            :show-overflow-tooltip="true"
            :class-name="item.className ? item.className : ''"
            :key="item.id"
            :fixed="item.fixed"
            :width="item.width ? item.width : ''"
            :min-width="item.minWidth ? item.minWidth : ''"
          >
          </el-table-column>
        </template>

        <!-- 操作 -->
        <el-table-column
          column-key="operation"
          :label="table.operation.label"
          :width="table.operation.width ? table.operation.width : ''"
          :min-width="table.operation.minWidth ? table.operation.minWidth : ''"
          :class-name="table.operation.className"
          v-if="table.hasOperation"
        >
          <template #default="scope">
            <el-button
              v-for="item in table.operation.data"
              :class="item.classname ? item.classname : ''"
              :disabled="item.disabled ? item.disable : false"
              :key="item.id"
              :type="item.type"
              :size="item.size"
              :icon="item.icon"
              :circle="item.circle"
              @click.stop="handleOperation(scope.$index, scope.row, item.id)"
              >
              <!-- <el-icon><component :is="item.icon"></component></el-icon> -->
              {{ item.label }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="buttom-btn">
      <slot name="footerBtn"></slot>
    </div>

    <!-- 分页 -->
    <pagination
      v-if="showPage && table.hasPage"
      :pageBean="pageBean"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :pagerCount="pagerCount"
      :isShowTotal="isShowTotal"
      :hasJump="hasJump"
    ></pagination>
  </div>
</template>

<script setup lang='ts'>
import pagination from "./pagination.vue";
import { PageBean } from "../../utils/page-bean";
import { reactive, ref, watch, computed, nextTick, toRefs } from 'vue';

const emit = defineEmits(["pageChange","handleSelectionChange","onRowClick","handleSubmit","handleDel","handleAmend"])

const props = defineProps({
     // 表格配置及数据
    table: {
      type: Object,
      default() {
        return {
          hasMergeRowOrColumn: false, // 是否合并单元格
          loading: false, // 加载中动画
          hasShowSummary: false, // 是否显示表位合计行
          headerShowBtn: false, // 是否显示表位合计行
          hasIndex: true, // 是否显示序号
          border: false, // 是否带有纵向边框，默认为false
          hasSelect: false, // 有无选中功能
          hasOperation: false, // 有无操作功能
          hasSearch: false, // 有无搜索
          hasPage: true, // 是否显示分页
          tr: [
            // 表头数据 —— className:列的class名
            {
              id: "1",
              label: "label",
              prop: "prop",
              className: "classname",
              minWidth: "80",
              filters:[], //筛选的条件
              filterFun: null, // 筛选的方法  filterFun: this.filterTag    filterTag(value, row) { return row.name === value },
              show: true, // show有三种值：false隐藏当前列，true常规表格列，template自定义表格列
              //          <template slot-scope="props" slot="example">
              //                <a class="list-a" target="_blank" :href="'/#/bombscreen?mobile=' + props.obj.row.mobile">{{ props.obj.row.username }}</a>
              //          </template>
            },
          ],
          operation: {
            // 操作功能
            label: "操作", // 操作列的行首文字
            width: "200", // 操作列的宽度
            className: "", // 操作列的class名
            data: [
              // 操作列数据
              {
                label: "通过", // 按钮文字
                Fun: "handleSubmit", // 点击按钮后触发的父组件事件
                size: "mini", // 按钮大小
                id: "1", // 按钮循环组件的key值
                classname: "show", // 按钮的类名
              },
            ],
          },
          getSummaries(param) {
            // 自定义表位合计行数据
            // *** 此函数传入param参数
            console.log(param);
            // *** 最后返回一个数组，合计行会显示数组中的内容
            return [];
          },
        };
      },
    },
    // 表格数据
    tableData: Array,
    // 分页
    pageBean: {
      type: Object,
      default: function () {
        return new PageBean();
      },
    },
    pagerCount: {
      type: Number,
      default: 7,
    },
    isShowTotal: {
      type: Boolean,
      default: true,
    },
    hasJump: {
      type: Boolean,
      default: true,
    },
    tableRowClassName: {
      type: Function,
      default: function ({ row, rowIndex }) {
        row.row_index = rowIndex;
      },
    },
    filterData: {
      type: Object,
      default: () => {},
    },
    //需要导出
    hasExport: {
      type: Boolean,
      default: false,
    },
    exportName: {
      type: String,
      default: "",
    },
    exportId: {
      type: String,
      default: "",
    },
})
const ELTable = ref()
interface dataItem {
    showPage:any
    selectedData:Array<any>
}
const data:dataItem = reactive({
    // 是否显示分页
    showPage: null,
    // 翻页时需要记住所选id
    selectedData: [],
})
const showform = ref(true)
const {showPage, selectedData} = toRefs(data)
watch(
    () => [props.tableData],
    (val) => {
      if (props.pageBean.lastIndex === 1) {
        data.showPage = false;
      } else {
        data.showPage = !!val.length;
      }
      if (val) {
        nextTick();
        setTimeout(() => {
          ELTable.value.doLayout()
        }, 100);
      }
    },
    {
      deep:true
    }
)

const filterHandler = () => {

}
const checkSelectable = (row) => {
    return !row.disabled;
}
const clickShow = () => {
  showform.value = !showform.value
}
 /**
 * 每页显示多少条变化事件
 */
const handleSizeChange = (event) => {
    props.pageBean.pageSize = event;
    emit('pageChange',props.pageBean);
}
/**
 * 页码变化
 */
const handleCurrentChange = (event) => {
    props.pageBean.pageIndex = event;
    emit('pageChange',props.pageBean);
}
/**
 * 选中的数据
 */
const handleSelectionChange = (row) => {
    data.selectedData = row;
    emit('handleSelectionChange',row);
}
/**
 * 点击某一行时触发的函数
 */
const rowClick = (Row, Event, Column) => {
    if (
        !Column ||
        Column.type === "selection" ||
        Column.columnKey === "operation" ||
        Column.type === "expand"
    ) {
    return;
    }
    const list = {
        row: Row,
        event: Event,
        column: Column,
    };
    emit("onRowClick", list);
}
/**
 * 按钮事件
 */
const handleOperation = (a, b, id) => {
    const list = props.table.operation.data;
    for (let i = 0; i < list.length; i++) {
        if (id === list[i].id) {
          emit(list[i].Fun, a, b, id)
        }
      }
}
</script>

<style lang="scss" scoped>
.search-box {
  padding: 0 0 20px;
  background-color: rgb(255, 255, 255);
}
:deep(.el-table__header) {
  height: 50px;
  font-size: 15px;
  font-weight: bold;
  color: #666;
  th {
    background: #f4f5ff;
    height: 50px;
  }
}
:deep(.el-table__body) {
  th {
    height: 50px;
    border-bottom: 1px solid #e7e7e7;
    color: #000;
  }
}

:deep(.el-table) {
  .cell {
    padding: 0 10px !important;
  }
  tr {
    th:first-child,
    td:first-child {
      padding-left: 15px;
    }
    th:last-child,
    td:last-child {
      padding-right: 15px;
    }
  }
  .hidden-row {
    display: none;
  }
}

:deep(.el-table th.gutter) {
  display: table-cell !important;
}
.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
  img {
    width: 120px;
  }
  span {
    color: #bbb;
    line-height: 40px;
  }
}
.export-btn {
  margin-top: 10px;
}
.look{
  color: #15A4FA;
}
.compile{
  color: #15A4FA;
}
.delete{
  color: #E25656;
}
.headerbtn{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
